<template>
    <!--搜索框-->
    <!--searchText：为用户在搜索框输入的值-->
    <van-search
            v-model="searchText"
            show-action
            placeholder="请输入搜索的标签"
            @search="onSearch"
            @cancel="onCancel"
    />

    <!--展示已选标签-->
    <van-divider content-position="left">已选标签</van-divider>
<!--    <div v-if="activeIds.length === 0">请选择标签</div>-->

    <!--使用van-row列和van-col使得标签间存在16像素的间距并且自动换行-->
    <van-row gutter="16" style="padding: 0 16px">
        <!--v-for="tag in activeId"：将已选的标签遍历输出出来-->
        <van-col v-for="tag in activeIds">
            <van-tag   closeable size="small" type="primary" @close="close(tag)">
                {{tag}}
            </van-tag>
        </van-col>
    </van-row>


    <van-divider content-position="left">选择标签</van-divider>

    <!--展示所有标签-->
    <!--main-active-index：左侧选中项的索引-->
    <!--active-id：右侧选中项的id-->
    <van-tree-select
            v-model:active-id="activeIds"
            v-model:main-active-index="activeIndex"
            :items="tagList"

    />
    <div style="padding: 12px">
        <van-button block type="primary" @click="doSearchResult()" >搜索</van-button>
    </div>

</template>

<script setup lang="ts">
    import {Toast} from "vant";
    import { ref } from 'vue';
    import {useRouter} from 'vue-router'

    const searchText = ref('');

    //标签列表
    const activeIds = ref([]);//选中标签的id
    const activeIndex = ref(0);

    const onriginTagList = [
        {
            text: '学历',
            children: [
                { text: '求职', id: '求职' },
                { text: '在职', id: '在职' },
                { text: '待业', id: '待业' },
                { text: '高中', id: '高中' },
                { text: '专科', id: '专科' },
                { text: '大一', id: '大一' },
                { text: '大二', id: '大二' },
                { text: '大三', id: '大三' },
                { text: '大四', id: '大四' },
                { text: '研究生', id: '研究生' },
                { text: '博士', id: '博士' },

            ],
        },
        {
            text: '计算机语言',
            children: [
                { text: 'java', id: 'java' },
                { text: 'c', id: 'c' },
                { text: 'c++', id: 'c++' },
                { text: 'c#', id: 'c#' },
                { text: 'go', id: 'go' },
            ],
        },
        {
            text: '兴趣爱好',
            children: [
                { text: '编程', id: 'java' },
                { text: '羽毛球', id: 'c' },
                { text: '篮球', id: 'c++' },
                { text: '乒乓球', id: 'c#' },
                { text: '游泳', id: 'go' },
            ],
        },
    ];

    //克隆一份TagList数据【用作过滤搜索】，并将其编程响应式数据
    let tagList = ref(onriginTagList);

    //根据tagList进行搜索【一个难点】
    const onSearch = (val) => {
        //进行简易的搜索过滤【减少后端数据的访问】
        //使用flatMap将所有的children中包含的数组合并成一个大数组
        //再通过filter，返回text包含搜索的关键字，并将其存储回activeIds数组中

        tagList.value = onriginTagList.map(parentTag => {
            const tempChildren = [...parentTag.children];
            const tempParentTag = {...parentTag};
            tempParentTag.children = tempChildren.filter(item => item.text.includes(searchText.value));
            return tempParentTag;
        })
    };

    //取消按钮
    const onCancel = () => {
        searchText.value = '';
        //不改变原数据【下面这条代码运用于上面搜索按钮】
        tagList.value = onriginTagList;
    };

    const show = ref(true);

    //关闭标签功能【一个难点】
    const close = (tag) => {
        //activeIds是ref包装的对象，需要用value去到本身的值，是一个数组
        //tag是所要删除的标签
        activeIds.value = activeIds.value.filter(item => {
            //filter是下面ruturn为true就保留
            return item !== tag;
        })
    }

    //提交功能
    const router = useRouter();
    const doSearchResult = () => {
        router.push({
            path:'/user/list',
            query:{
                tags:activeIds.value
            }//将已选标签传递出去
        })
    }

</script>

<style scoped>

</style>